<template>
  <div>
    <div class="absolute p4-pos" style="overflow: hidden">
      <div class="left_top relative p4-size">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title"><img src="@/assets/img/page1/icon4.png" />介绍</div>
        <h2 style="color: rgb(255, 87, 34); font-size: 20px">
          {{ indroce.name }}
        </h2>
        <div style="color: white; font-size: 16px; line-height: 40px">
          {{ indroce.introduce }}
        </div>
      </div>
    </div>
    <div class="absolute p2-pos" style="overflow: hidden">
      <div class="left_top relative p2-size">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />智慧农村词云
        </div>
        <div ref="word" style="width: 98%; height: 98%"></div>
      </div>
    </div>
    <div class="absolute p1-pos" style="overflow: hidden">
      <div class="left_top relative p1-size">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />乡村图片
        </div>
        <el-carousel :interval="3000" arrow="always">
          <el-carousel-item v-for="(item, index) in images" :key="item">
            <el-image :src="item" fit="contain"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="absolute p5-pos" style="overflow: hidden">
      <div class="left_top relative p5-size">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />产值柱形图
        </div>
        <div ref="chanzhi" style="width: 99%; height: 88%"></div>
      </div>
    </div>
    <div class="absolute p6-pos" style="overflow: hidden">
      <div class="left_top relative p6-size">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />粮食产值图
        </div>
        <div ref="liangshi" style="width: 99%; height: 88%"></div>
      </div>
    </div>
    <div class="absolute w23 t7-pos">
      <div class="left_top relative m1-pos m7-size" style="overflow: hidden">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />智慧农村信息
        </div>
        <div v-for="(item, index) in article">
          <a :href="item.link" target="_blank">
            <h1 style="color: #ff5722">{{ item.newsTitle }}</h1>
            <div class="white" style="font-size: 16px; line-height: 35px">
              <span>时间:{{ item.createTime }}</span
              >&nbsp;&nbsp;<span>作者:{{ item.author }}</span>
              <div>{{ item.briefIntroduction }}</div>
            </div>
            <el-divider></el-divider>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "echarts-wordcloud";
import * as echarts from "echarts";
import {
  findSrsbBulletinVillageInformation,
  getWordCloudList,
  getBulletinAgricultural,
  getLiangShiData,
  getNews,
} from "@/api/smartagriculture";
export default {
  mounted() {
    this.findSrsbBulletinVillageInformation();
    this.getWordCloudList();
    this.getBulletinAgricultural();
    this.getLiangShiData();
    this.getNews();
  },
  data() {
    return {
      article: [],
      lsdata: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "全年产值",
              "单产值",
              "总产值",
              "夏粮亩产",
              "夏粮总产",
              "小麦亩产",
              "秋粮亩产",
              "秋粮总产",
              "水稻亩产",
              "水稻总产",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220, 11, 11, 11, 100],
          },
        ],
      },
      cdata: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["农业产值", "林业产值", "渔业产值", "农村服务业产值"],
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [190, 29, 91, 90, 32],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
      images: [
        "https://h2-shanghai-blog.oss-cn-shanghai.aliyuncs.com/srsb/image/20220507/8554c1a4286346789ac181c73fbd5f05.webp",
        "https://h2-shanghai-blog.oss-cn-shanghai.aliyuncs.com/srsb/image/20220507/96bd2c5f4fe548b4b5734f73546a5522.webp",
        "https://h2-shanghai-blog.oss-cn-shanghai.aliyuncs.com/srsb/image/20220507/1a1932fed8b64e82a5ca42c21b63ec1b.webp",
        "https://h2-shanghai-blog.oss-cn-shanghai.aliyuncs.com/srsb/image/20220507/bb4995d67d3d461d9ab94b64d2f9ab25.webp",
      ],
      wordOperation: {
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "wordCloud", //词云图
            gridSize: 7, //词的间距
            sizeRange: [9, 40], //词云大小范围
            textStyle: {
              color: function () {
                //词云的颜色随机
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 250),
                    Math.round(Math.random() * 250),
                    Math.round(Math.random() * 250),
                  ].join(",") +
                  ")"
                );
              },
              normal: {},
              emphasis: {
                shadowBlur: 50, //阴影的模糊等级
                shadowColor: "#333", //鼠标悬停在词云上的阴影颜色
              },
            },
            data: [
              {
                name: " 新鲜水果",
                value: 32,
              },
              {
                name: " 美味",
                value: 30,
              },
              {
                name: " 健康",
                value: 30,
              },
              {
                name: " 维生素",
                value: 28,
              },
              {
                name: " 西瓜",
                value: 26,
              },
              {
                name: " 樱桃",
                value: 24,
              },
              {
                name: " 桃子",
                value: 24,
              },
              {
                name: " 甜瓜",
                value: 22,
              },
              {
                name: " 香蕉",
                value: 22,
              },
              {
                name: " 苹果",
                value: 22,
              },
              {
                name: " 梨子",
                value: 22,
              },
              {
                name: " 荔枝",
                value: 20,
              },
              {
                name: " 葡萄",
                value: 20,
              },
              {
                name: " 杨梅",
                value: 20,
              },
            ],
          },
        ],
      },
      indroce: {},
    };
  },
  methods: {
    getNews() {
      let that = this;
      getNews(10)
        .then((res) => {
          that.article = res.data;
        })
        .catch((err) => {});
    },
    getLiangShiData() {
      let that = this;
      getLiangShiData("2020")
        .then((res) => {
          that.lsdata.series[0].data = [
            res.data.annualGrainSowingArea,
            res.data.unitYieldValue,
            res.data.totalOutputValue,
            res.data.summerGrainYieldPerMu,
            res.data.summerGrainTotalOutput,
            res.data.wheatYieldPerMu,
            res.data.autumnGrainYieldErMu,
            res.data.totalAutumnGrainYield,
            res.data.riceYieldPerMu,
            res.data.totalRiceYield,
          ];
          this.$nextTick(() => {
            var chartDom = that.$refs.liangshi;
            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts.init(chartDom, "dark").setOption(that.lsdata);
          });
        })
        .catch((err) => {});
    },
    getBulletinAgricultural() {
      let that = this;
      getBulletinAgricultural("2020")
        .then((res) => {
          console.log("11111", that.cdata.series[0].data);
          that.cdata.series[0].data = [
            res.data.agriculturalOutputValue,
            res.data.forestryOutputValue,
            res.data.animalHusbandryOutputValue,
            res.data.fisheryOutputValue,
            res.data.serviceOutputValue,
          ];
          console.log(that.cdata.series[0].data);
          this.$nextTick(() => {
            var chartDom = that.$refs.chanzhi;
            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts.init(chartDom, "dark").setOption(that.cdata);
          });
        })
        .catch((err) => {});
    },
    getWordCloudList() {
      let that = this;
      getWordCloudList()
        .then((res) => {
          that.wordOperation.series[0].data = res.data;
          this.$nextTick(() => {
            var chartDom = that.$refs.word;

            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts.init(chartDom).setOption(that.wordOperation);
          });
        })
        .catch((err) => {});
    },
    findSrsbBulletinVillageInformation() {
      findSrsbBulletinVillageInformation("金村村").then((res) => {
        this.indroce = res.data;
        console.log(res.data);
      });
    },
  },
};
</script>

<style scoped>
@import "../../css/index.css";
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.p1-pos {
  left: 80px;
  top: 97px;
}
.p1-size {
  height: 300px;
  width: 550px;
}
.p2-pos {
  left: 80px;
  top: 780px;
}
.p2-size {
  height: 300px;
  width: 550px;
}
.p3-pos {
  left: 80px;
  top: 560px;
}
.p3-size {
  height: 300px;
  width: 550px;
}
.p4-pos {
  left: 80px;
  top: 440px;
}
.p4-size {
  height: 300px;
  width: 550px;
}
.p5-pos {
  left: 682px;
  top: 711px;
}
.p5-size {
  height: 370px;
  width: 798px;
}
.p6-pos {
  left: 680px;
  top: 94px;
}
.p6-size {
  height: 585px;
  width: 800px;
}
.t7-pos {
  left: 1512px;
  top: 94px;
}
.m7-size {
  height: 975px;
  width: 373px;
}
.white {
  color: white;
}
</style>